<template>
  <div id="BacWorkFlowNodeDictForm">
    <!-- tab基本信息表单  -->
    <el-scrollbar style="height: 100%">
      <el-form
        ref="formRef"
        :model="formData"
        label-width="90px"
        class="form-input-m"
        inline-message
      >
        <el-row :gutter="24">
          <el-col :span="24">
            <el-form-item label="节点类型" prop="nodeTypeNa">
              <SelectDataList
                ref="employeeSelectRef"
                :url="'/api/sys/basDictDetail/findDictDetailList'"
                :displayField="[
                { title: '编码', props: 'code' }, //列标题
                { title: '名称', props: 'name' }
              ]"
                :placeholder="'点击种分组'"
                :searchParam="{ code: 'WKFLWNODETYPE' }"
                @selectDataRow="dropSelectConfirm"
                v-model="formData.nodeTypeNa"
              />
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="20">
          <el-col :span="24">
            <el-form-item label="编码" prop="code">
              <el-input v-model="formData.code" placeholder="请输入编码" clearable></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="24">
            <el-form-item label="名称" prop="name">
              <el-input v-model="formData.name" placeholder="请输入名称" clearable></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="24">
            <el-form-item label="顺序" prop="seq">
              <el-input v-model="formData.seq" placeholder="请输入名称" clearable></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="24">
            <el-form-item label="详细说明" prop="explain">
              <el-input v-model="formData.explain" clearable type="textarea" style="width:65%;"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="24">
            <el-form-item label="应用页面编码" prop="pageCode">
              <el-input v-model="formData.pageCode" placeholder="请输入应用页面" clearable></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="24">
            <el-form-item label="应用页面" prop="pageName">
              <el-input v-model="formData.pageName" placeholder="请输入应用页面" clearable></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="24">
            <el-form-item label="适合操作" prop="operation">
              <el-input v-model="formData.operation" placeholder="请输入适合操作" clearable></el-input>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="20">
          <el-col :span="24">
            <el-form-item label="显示标志" prop="displayFlag">
              <el-input v-model="formData.displayFlag" placeholder="显示标志" clearable></el-input>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="20">
          <el-col :span="24">
            <el-form-item label="显示颜色" prop="displayColor">
              <!-- <el-input v-model="formData.displayColor" placeholder="显示颜色" clearable></el-input> -->
              <el-color-picker v-model="formData.displayColor" />
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="20">
          <el-col :span="24">
            <el-form-item label="是否打印标签" prop="isPrintLabel">
              <el-switch
                v-model="formData.isPrintLabel"
                inline-prompt
                active-text="是"
                inactive-text="否"
                active-value="1"
                inactive-value="0"
              ></el-switch>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="20">
          <el-col :span="24">
            <el-form-item label="是否启用" prop="isEnable">
              <el-switch
                v-model="formData.isEnable"
                inline-prompt
                active-text="是"
                inactive-text="否"
                active-value="1"
                inactive-value="0"
              ></el-switch>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="20">
          <el-col :span="24">
            <el-form-item>
              <el-button type="primary" @click="saveForm">保存</el-button>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>

      <!-- 配置扩展属性弹框 -->
      <EditExtraProperties ref="EditExtraPropertiesRef" />
    </el-scrollbar>
  </div>
</template>

<script lang="ts" setup>
// 引入组件区==========
import { ref, reactive, getCurrentInstance, PropType, onMounted } from 'vue';
import { VXETable, VxeFormPropTypes, VxeButtonEvents } from 'vxe-table';
import { VxeMessage, VxeNotifyType } from '@/utils/CommonMessage';
import EditExtraProperties from '@/components/EditExtraProperties.vue'; //配置扩展属性弹框组件
import SelectDataList from '@/components/SelectDataList.vue';

// 全局变量定义区 ==========
let { proxy }: any = getCurrentInstance();

// 基本信息form表单
let formData: any = reactive({
  id: '',
  code: '' /*编码*/,
  name: '' /*名称*/,
  standardName: '' /*标准名称*/,
  inputCode: '' /*输入码*/,
  isStatic: '0' /*是否静态*/,
  displayOrder: '' /*显示顺序*/,
  nodeTypeNo: '' /**类型编码 */,
  nodeTypeNa: '' /**类型名称 */,
  isEnable: 1 /** */
});

let formRef = ref(null); //form表单标记ref

let showLoading = ref(false); //保存按钮
// 方法定义区 =============
defineExpose({ initPage, clearFormData, initAddPage, addNew });
let repSeq = 0;

function initAddPage(addSeq: number) {
  repSeq = addSeq;
}

function addNew() {
  clearFormData(); // 清空表单
}

// 左侧表格点击当前行传过来的数据
function initPage(row: any) {
  if (row !== null) {
    for (let prop in row) {
      formData[prop] = row[prop];
    }
  }
}

onMounted(() => {});

//清空数据
function clearFormData() {
  for (let key in formData) {
    formData[key] = '';
  }
  const el: any = proxy.$refs['formRef'];
  el.resetFields(); //重置该表单项，将其值重置为初始值，并移除校验结果
}

// 新增按钮 + 重置按钮
function handleAdd() {
  clearFormData();
}

//**判断为空*/
function IsEmpty(value: any) {
  if (value === undefined || value === '' || value === null) {
    return true;
  }
  if (JSON.stringify(value) === '{}') {
    return true;
  }
  return false;
}

// 保存按钮
function saveForm() {
  let url = '';
  // 判断添加和编辑接口
  let isAdd = true;
  if (IsEmpty(formData.id)) {
    url = '/api/bac/bac-work-flow-node-dict/addBacWorkFlowNodeDict';
  } else {
    isAdd = false;
    url = '/api/bac/bac-work-flow-node-dict/updateBacWorkFlowNodeDict';
  }
  proxy.$http
    .post(url, formData)
    .then((res: any) => {
      if (res.status.code === 1) {
        if (isAdd) {
          VxeMessage('新增流程节点字典成功', VxeNotifyType.success);
        } else {
          VxeMessage('修改流程节点字典成功', VxeNotifyType.success);
        }
        proxy.$emit('getTableData'); //触发父组件重新获取表格数据
      } else {
        if (isAdd) {
          VxeMessage('新增流程节点字典失败', VxeNotifyType.error);
        } else {
          VxeMessage('修改流程节点字典失败', VxeNotifyType.error);
        }
        proxy.$emit('getTableData'); //触发父组件重新获取表格数据
        return;
      }
    })
    .catch((err: any) => {
      VxeMessage('新增流程节点字典异常', VxeNotifyType.error);
    });

  showLoading.value = false;
  clearFormData(); //清空数据
}
/**节点类型 确认选择事件 */
function dropSelectConfirm(e) {
  formData.nodeTypeNo = e.code;
  formData.nodeTypeNa = e.name;
}
</script>

<style lang="scss" scoped>
#BacWorkFlowNodeDictForm {
  padding: 15px;
  height: calc(100% - 30px);
  width: calc(100% - 30px);
  .el-row {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
}
</style>
